<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '900px' }"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
    :mask-closable="false"
  >
    <template #header>
      <div>批量修改投放时间</div>
      <n-text style="font-size: 14px">已选{{ getProps.modalData?.adgroupIdList?.length }}个广告</n-text>
    </template>
    <n-space vertical>
      <n-radio-group v-model:value="form.type">
        <n-radio key="统一修改" :value="1">统一修改</n-radio>
        <n-radio key="分别修改" :value="2">分别修改</n-radio>
      </n-radio-group>
      <n-data-table
        ref="tableRef"
        size="small"
        :data="getProps.modalData.checkedData"
        :columns="columns"
        :row-key="(row) => row.id"
        row-class-name="text-sm"
        max-height="infinite"
      />
      <n-space justify="end">
        <x-button @click="handleCancel">取消</x-button>
        <x-button :loading="loading" type="primary" @click="handleSave">确定</x-button>
      </n-space>
    </n-space>
  </n-modal>
</template>

<script setup lang="ts">
  import { computed, h, onMounted, reactive, ref, watch } from 'vue'
  import { XButton, XForm } from '@/components'

  import {
    NModal,
    NSpace,
    NInputNumber,
    NRadioGroup,
    NRadio,
    useMessage,
    NSelect,
    NText,
    NDataTable,
    NDatePicker,
    NCheckbox
  } from 'naive-ui'
  import { useStore } from '@/store'
  import { useRoute } from 'vue-router'
  import { defineProps, defineEmits } from 'vue'
  import { formatDate } from '@/utils'
  import { gdtBatchDate } from '@/api/intelligent'
  const route = useRoute()
  const emit = defineEmits(['success'])
  const message = useMessage()
  const store = useStore()
  const accountCode = computed(() => {
    return route.query.accountCode
  })
  const loading = ref(false)
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const range = []
  for (let i = 0; i <= 23; i++) {
    range.push({
      label: i < 10 ? `0${i}:00` : `${i}:00`,
      value: i < 10 ? `0${i}:00` : `${i}:00`,
      disabled: false
    })
  }
  const range1 = []
  for (let i = 1; i <= 24; i++) {
    range1.push({
      label: i < 10 ? `0${i}:00` : `${i}:00`,
      value: i < 10 ? `0${i}:00` : `${i}:00`,
      disabled: false
    })
  }
  const range2 = []
  for (let i = 1; i <= 24; i++) {
    range2.push({
      label: i < 10 ? `0${i}:00` : `${i}:00`,
      value: i < 10 ? `0${i}:00` : `${i}:00`,
      disabled: false
    })
  }
  const optionsBeginTime = ref(range)
  const optionsEndTime = ref(range1)
  const optionsTime = ref(range2)
  const getProps = reactive(props)
  const form = ref({
    accountCode: route.query.accountCode,
    type: 1
  })
  console.log(getProps, 111111)
  const columns = computed(() => {
    const arr = [
      {
        title: '广告名称',
        key: 'accountName',
        width: 100,
        render(row: any) {
          return h(NSpace, { vertical: true }, () => [h(NText, {}, () => row.adgroupName)])
        }
      },
      {
        title: '原投放日期',
        key: 'launchTime',
        width: 100,
        render(row: any) {
          return h(NSpace, { vertical: true }, () => [
            h(NText, {}, () => `投放时间：${row.launchDate}`),
            h(NText, {}, () => `首日开始时间：${row.launchTime}`)
          ])
        }
      },
      form.value.type === 2
        ? {
            title: '批量修改投放时间',
            key: 'configuredStatus',
            width: 100,
            render(row: any) {
              row.optionsBeginTime = optionsBeginTime.value
              row.optionsEndTime = optionsEndTime.value
              row.optionsTime = optionsTime.value
              return h(NSpace, { vertical: true }, () => [
                h(
                  'div',
                  {
                    style: 'display: flex;align-items: center;'
                  },
                  [
                    h(NSelect, {
                      options: row.optionsBeginTime,
                      value: row.beginTime,
                      clearable: true,
                      onUpdateValue(v: any) {
                        row.beginTime = v
                        row.optionsEndTime.forEach((item: any) => {
                          item.disabled = item.value <= v
                        })
                        row.optionsTime.forEach((item: any) => {
                          item.disabled = item.value <= row.beginTime || item.value >= row.endTime
                        })
                        row.firstDayBeginTime = null
                      }
                    }),
                    '—',
                    h(NSelect, {
                      options: row.optionsEndTime,
                      value: row.endTime,
                      clearable: true,
                      onUpdateValue(v: any) {
                        row.endTime = v
                        row.firstDayBeginTime = null
                        row.optionsTime.forEach((item: any) => {
                          item.disabled = item.value <= row.beginTime || item.value >= row.endTime
                        })
                      }
                    })
                  ]
                ),
                h(NCheckbox, {
                  label: '指定首日开始时间',
                  key: '指定首日开始时间',
                  checked: row.firstDayChecked,
                  onUpdateChecked(v: any) {
                    row.firstDayChecked = v
                  }
                }),
                row.firstDayChecked
                  ? h(
                      'div',
                      {
                        style: 'display: flex;align-items: center;'
                      },
                      [
                        h(NSelect, {
                          options: row.optionsTime,
                          value: row.firstDayBeginTime,
                          onUpdateValue(v: any) {
                            row.firstDayBeginTime = v
                          }
                        })
                      ]
                    )
                  : null
              ])
            }
          }
        : {
            title: '批量修改投放时间',
            key: 'configuredStatus',
            rowSpan: (rowData: any, rowIndex: number) => (rowIndex === 0 ? getProps.modalData.checkedData.length : 1),
            width: 100,
            render(row: any) {
              row.optionsBeginTime = optionsBeginTime.value
              row.optionsEndTime = optionsEndTime.value
              row.optionsTime = optionsTime.value
              return h(NSpace, { vertical: true }, () => [
                h(
                  'div',
                  {
                    style: 'display: flex;align-items: center;'
                  },
                  [
                    h(NSelect, {
                      options: row.optionsBeginTime,
                      value: row.beginTime,
                      clearable: true,
                      onUpdateValue(v: any) {
                        row.beginTime = v
                        row.optionsEndTime.forEach((item: any) => {
                          item.disabled = item.value <= v
                        })
                        row.optionsTime.forEach((item: any) => {
                          item.disabled = item.value <= row.beginTime || item.value >= row.endTime
                        })
                        row.firstDayBeginTime = null
                      }
                    }),
                    '—',
                    h(NSelect, {
                      options: row.optionsEndTime,
                      value: row.endTime,
                      clearable: true,
                      onUpdateValue(v: any) {
                        row.endTime = v
                        row.firstDayBeginTime = null
                        row.optionsTime.forEach((item: any) => {
                          item.disabled = item.value <= row.beginTime || item.value >= row.endTime
                        })
                      }
                    })
                  ]
                ),
                h(NCheckbox, {
                  label: '指定首日开始时间',
                  key: '指定首日开始时间',
                  checked: row.firstDayChecked,
                  onUpdateChecked(v: any) {
                    row.firstDayChecked = v
                  }
                }),
                row.firstDayChecked
                  ? h(
                      'div',
                      {
                        style: 'display: flex;align-items: center;'
                      },
                      [
                        h(NSelect, {
                          options: row.optionsTime,
                          value: row.firstDayBeginTime,
                          onUpdateValue(v: any) {
                            row.firstDayBeginTime = v
                          }
                        })
                      ]
                    )
                  : null
              ])
            }
          }
    ]
    return arr
  })
  onMounted(() => {})
  async function handleSave() {
    const checkedData = getProps.modalData.checkedData
    const adgroupList: { accountCode: any; outAdgroupId: any; firstDayBeginTime: any }[] = []
    checkedData.forEach((item: any) => {
      adgroupList.push({
        accountCode: item.accountCode,
        outAdgroupId: item.adgroupId,
        beginTime: form.value.type === 1 ? checkedData?.[0].beginTime : item.beginTime,
        endTime: form.value.type === 1 ? checkedData?.[0].endTime : item.endTime,
        firstDayBeginTime:
          form.value.type === 1
            ? checkedData?.[0].firstDayChecked
              ? checkedData?.[0].firstDayBeginTime
              : null
            : item.firstDayChecked
            ? item.firstDayBeginTime
            : null
      })
    })
    const params = {
      adgroupList: adgroupList
    }
    loading.value = true
    store
      .dispatch('intelligent/gdtBatchTime', params)
      .then(() => {
        message.success(`修改成功`)
        loading.value = false
        emit('success')
        getProps.modalData.show = false
      })
      .catch(() => {
        loading.value = false
      })
  }
  function handleCancel() {
    getProps.modalData.show = false
  }
</script>

<style scoped lang="scss">
  .tips {
    margin-top: 20px;
  }
  .max-cost {
    padding: 10px 0;
    text-align: center;
  }
</style>
